<template>
  <div>
    <el-popover placement="top-start" title="" :width="200" trigger="click">
      <template #reference>
        <div class="userFilledClass">
          <el-icon style="font-size: 16px; margin-right: 3px">
            <UserFilled />
          </el-icon>
          <!--<span style="font-size: 11px;margin-top: 2px">个人中心</span>-->
        </div>
      </template>
      <div>机构：{{ userInfo.jgmc }}</div>
      <div>账号：{{ userInfo.zh }}</div>
      <div>姓名：{{ userInfo.rxm }}</div>
      <!--<div style="margin-top: 5px">-->
      <!--  <el-button class="centerButtonClass" size="small" style="">历史消息</el-button>-->
      <!--</div>-->
      <div style="margin-top: 5px">
        <!--<el-button class="centerButtonClass" size="small">编辑密码</el-button>-->
      </div>
      <div style="margin-top: 5px">
        <el-button class="centerButtonClass" size="small" @click="toLogout"
          >注销</el-button
        >
      </div>
      <!--<div>-->
      <!--  <el-button size="small" style="width: 100%">退出</el-button>-->
      <!--</div>-->
    </el-popover>
  </div>
</template>

<script setup lang="ts">
import { UserFilled } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { logout } from "@ui/vue/api";
import { useUserStore } from "@ui/vue/store";
const router = useRouter();

const userInfo = useUserStore().getUserInfo;

const toLogout = () => {
  logout({ data: { type: "" } }).then((res) => {
    // 清除所有缓存
    sessionStorage.clear();
    // 回到登录页
    router.push("/");
    // console.log(JSON.stringify(res))
  });
};
</script>

<style scoped lang="scss">
.centerButtonClass {
  width: 100%;
  color: #ffffff;
  background-color: #337ecc;
}
.userFilledClass {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.userFilledClass:hover {
  color: #79bbff;
}
</style>
